<template>
	<view v-if="show">
		<view class="header-title flex">
			<view class="header-left row">
				<text>当前题目</text>
				<span>当前题目标题</span>
			</view>
			<view class="header-right row" @tap="add">
				<image :src="imgurl+'addtiaojian.png'"></image>
				<text>添加条件</text>
			</view>
		</view>
		<view class="main-title" v-if="false">当设置相关条件后才会出现当前题目</view>
		<view class="test" v-for="(item,indexs) in optionArray" :key="item.id">
			<view class="main" v-if="item.checked">
				<view class="main-top">
					<view class="top-title flex">
						<text>{{item.ti}}</text>
						<image :src="imgurl+'del.png'" @tap="del(indexs)"></image>
					</view>
					<view v-for="el in item.di" :key="el.id" class="top-content">
						<view v-if="el.checked">
							<span>·</span>
							<text>{{el.wen}}</text>
						</view>
					</view>
				</view>
				<view class="main-bottom">当选中其选项时，出现当前题目</view>
			</view>
			<view class="footer" v-if="false">
				<view class="footer-title">设置多题条件时，多题之间为：</view>
				<picker @change="Screen" :value="index" :range="array">
					<view class="picker">
						{{array[index]}}
					</view>
				</picker>
			</view>
		</view>
		<button class="buttoncss" @tap="submit">完成</button>
	</view>
	<view class="other" :style="{height:height+'px'}" v-else>
		<view class="other-header">
			<image :src="imgurl+'cha.png'" @tap="Hide"></image>
			<text>请选择要关联的问题</text>
		</view>
		<checkbox-group @change="showOption">
			<view class="other-main-item" v-for="(item,indexs) in optionArray" :key="item.id">
				<view class="other-main flex">
					<view class="other-main-left">{{indexs+1}}</view>
					<view class="other-main-center">
						<text>{{item.ti}}</text>
					</view>
					<view class="other-main-left">
						<label>
							<checkbox :value="item.id" :checked="item.checked" color="#1F9FFB" />
						</label>
					</view>
				</view>
				<view v-if="item.checked && item.pid != 3">
					<checkbox-group @change='choiceOption(indexs, $event, item.di)'>
						<view class="other-main-bottom flex" v-for="(el,index) in item.di" :key="el.id">
							<view class="main-bottom-center">{{index+1}}{{el.wen}}</view>
							<view class="main-bottom-left">
								<label>
									<checkbox :value="el.id" :checked="el.checked" color="#1F9FFB" />
								</label>
							</view>
						</view>
					</checkbox-group>
				</view>
			</view>
		</checkbox-group>
		<button class="buttoncss" @tap="save">确定</button>
	</view>
</template>

<script>
	import api from "@/common/api.js";
	import {
		baseURL
	} from "@/common/http.js";
	import app from "../../../App.vue"
	export default {
		data() {
			return {
				imgurl: '',
				height: "",
				show: true,
				dxarray: ['当选中其中任意一个选项时，出现当前题目', '当未选中其中任意一个选项时，出现当前题目', '当未选中其中全部选项时，出现当前题目', '当选中其中全部选项时，出现当前题目'],
				dxindex: 0,
				array: ['只满足一个关联条件', '需要满足所有的关联条件'],
				index: 0,
				optionArray: [],
				list: [],
				wenid: '',
				current: -1,
				values: [],
				id: '',
				type: ''
			};
		},
		methods: {
			//选中题目
			showOption(e) {
				let values = e.detail.value;
				for (let i = 0; i < this.optionArray.length; i++) {
					if (values.includes((this.optionArray[i].id).toString())) {
						this.$set(this.optionArray[i], 'checked', true)
					} else {
						this.$set(this.optionArray[i], 'checked', false)
					}
				}
			},
			//选择选项
			choiceOption(indexs, e, di) {
				let values = e.detail.value;
				for (let i = 0; i < di.length; i++) {
					if (values.includes((di[i].id).toString())) {
						this.$set(di[i], 'checked', true)
					} else {
						this.$set(di[i], 'checked', false)
					}
				}
			},
			//删除
			del(idx) {
				this.optionArray.forEach((item, index) => {
					if (idx == index && item.checked == true) {
						item.checked = false
						item.di.forEach((el, indexs) => {
							el.checked = false
						})
					}
				})
				this.$forceUpdate()
			},
			save() {
				this.show = true
				this.optionArray.forEach((item, index) => {
					let i = 0
					if (item.pid != 3 && item.di) {
						item.di.forEach((el, indexs) => {
							if (el.checked == true) {
								i += 1
							}
						})
						if (i > 0) {
							item.checked = true
						}
					}
				})
			},
			//多选题筛选
			Change(e) {
				this.dxindex = e.target.value
			},
			//筛选
			Screen(e) {
				this.index = e.target.value
			},
			//添加条件
			add() {
				this.show = false
			},
			Hide() {
				this.show = true
			},
			//清除
			Delete() {
				uni.showModal({
					title: '系统提示',
					content: '确定要清空已设置的关联逻辑么?',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定')
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//确定
			submit() {
				this.xiantiao = []
				this.optionArray.forEach((item, index) => {
					let obj = {}
					if (item.checked == true) {
						obj.id = item.id
						if (item.pid != 3) {
							obj.di = [];
							console.log('aaaaaaaaaaa',item.di);
							item.di.forEach((el, indexs) => {
								if (el.checked == true) {
									obj.di.push(el.id)
								// } else {
								// 	delete obj.di
								}
							})
						}
						this.xiantiao.push(obj)
					}
				})
				if (this.xiantiao.length > 0) {
					if (this.type == 3) {
						uni.navigateTo({
							url: '../editText/editText?shoeset=' + false + '&xiantiao=' + JSON.stringify(this.xiantiao)
						})
					} else {
						uni.navigateTo({
							url: '../editduoChoice/editduoChoice?shoeset=' + false + '&xiantiao=' + JSON.stringify(this.xiantiao)
						})
					}
				} else {
					uni.showToast({
						title: '没有设置显示条件',
						icon: 'none',
						duration: 2000,
						success: () => {
							this.xiantiao = ''
							setTimeout(() => {
								if (this.type == 3) {
									uni.navigateTo({
										url: '../editText/editText?shoeset=' + false + '&xiantiao=' + this.xiantiao
									})
								} else {
									uni.navigateTo({
										url: '../editduoChoice/editduoChoice?shoeset=' + false + '&xiantiao=' + this.xiantiao
									})
								}
							}, 2000)
						}
					})
				}
			}
		},
		onShareAppMessage(options) {
			let shareObj = {
				success: (res) => {
					if (res.errMsg == 'shareAppMessage:ok') {
						uni.showToast({
							title: '分享成功',
							icon: 'success',
							duration: 1500
						})
					}
				},
				fail: () => {
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						uni.showToast({
							title: '取消分享',
							icon: 'none',
							duration: 2000
						})
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				},
				complete: () => {
					// 转发结束之后的回调（转发成不成功都会执行）
				}
			}
		},
		onLoad(options) {
			this.wenid = options.wenid
			this.id = options.id
			this.type = options.type
			options.xiantiao ? this.xiantiao = JSON.parse(options.xiantiao) : this.xuantiao = []
			if (this.xiantiao) {
				this.show = true
			}
			api.look({
				api: 'wenxian',
				id: options.id,
				wenid: options.wenid
			}).then(res => {
				if (res.code == 200) {
					res.date.map((item, index) => {
						if (item.pid == 3) {
							res.date.splice(index, 1)
							return item
						}
					})
					this.optionArray = res.date
					if (this.xiantiao && this.xiantiao.length > 0) {
						this.optionArray.forEach((el, index) => {
							if (el.id === this.xiantiao[0].id) {
								el.checked = true
								if (this.xiantiao[0].di && this.xiantiao[0].di.length > 0) {
									el.di.forEach((item, idx) => {
										if (item.id === this.xiantiao[0].di[0]) {
											item.checked = true
										}
									})
								}
							}
						})
					}
				}
			}).catch(err => {
				console.log(err)
			})
			this.imgurl = app.globalData.imgurls,
				uni.getSystemInfo({
					success: (res) => {
						this.height = res.windowHeight
					}
				});
		}
	}
</script>

<style lang="scss">
	page {
		background: #F0F0F0;
		font-family: PingFang SC;
		font-weight: 500;
	}

	.header-title {
		width: 100%;
		height: 110rpx;
		background: #fff;
		padding: 0 30rpx;

		.header-left {
			width: 70%;
			color: #333;

			text {
				width: 100%;
				text-align: left;
				font-weight: bold;
				font-size: 36rpx;
			}

			span {
				width: 100%;
				text-align: left;
				font-size: 30rpx;
			}
		}

		.header-right {
			width: 24%;
			border-left: 1rpx solid #DFDFDF;

			image {
				width: 52rpx;
				height: 52rpx;
			}

			text {
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	.main-title {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #666;
		font-size: 30rpx;
		margin-top: 100rpx;
	}

	.test {
		position: relative;
	}

	.main {
		width: 690rpx;
		height: 300rpx;
		background: #fff;
		box-shadow: 0rpx 5rpx 15rpx 0rpx #DFDFDF;
		border-radius: 10rpx;
		margin: 20rpx auto;
		position: relative;

		.main-top {
			height: 200rpx;
			padding: 30rpx 20rpx;
			box-sizing: border-box;

			.top-title {
				justify-content: space-between;

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}

			.top-content {
				color: #666;
				font-size: 30rpx;
				margin: 15rpx 0;

				span {
					display: inline-block;
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
					margin-right: 10rpx;
					background: #999;
				}
			}
		}

		.main-bottom {
			height: 100rpx;
			line-height: 100rpx;
			background: #EFEFEF;
			padding: 0rpx 20rpx;
			justify-content: space-between;
			font-size: 30rpx;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}

	.footer {
		width: 100%;
		padding: 0 30rpx;
		height: 220rpx;
		background: #fff;
		color: #333;
		font-size: 30rpx;
		position: relative;

		.footer-title {
			height: 100rpx;
			line-height: 100rpx;
			font-weight: bold;
		}

		.picker {
			width: 85%;
			height: 80rpx;
			line-height: 80rpx;
			border: 1rpx solid #DFDFDF;
			border-radius: 10rpx;
			padding-left: 10rpx;
		}
	}

	.dingwei {
		position: absolute;
		bottom: -250rpx;
		left: 30rpx;

		.button {
			width: 690rpx;
			height: 100rpx;
			line-height: 100rpx;
			margin: 0 auto;
			background: #1F9FFB;
			color: #fff;
			border-radius: 50rpx;
			font-size: 36rpx;
		}

		.buttonother {
			color: #333;
			background: #fff;
			border: 1rpx solid #DFDFDF;
			margin-top: 20rpx;
		}
	}

	.buttoncss {
		width: 690rpx;
		height: 100rpx;
		line-height: 100rpx;
		margin: 0 auto;
		background: #1F9FFB;
		color: #fff;
		border-radius: 50rpx;
		font-size: 36rpx;
		position: fixed;
		bottom: 10%;
		left: 30rpx
	}

	.buttonother {
		color: #333;
		bottom: 5%;
		background: #fff;
		border: 1rpx solid #DFDFDF;
	}

	.other {
		background: #fff;
	}

	.other-header {
		height: 100rpx;
		padding: 0 30rpx;
		line-height: 100rpx;
		color: #666;
		font-size: 30rpx;
		border-bottom: 1rpx solid #DFDFDF;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 30rpx;
		}
	}

	.other-main-item {
		border-bottom: 1rpx solid #DFDFDF;
	}

	.other-main {
		width: 690rpx;
		height: 100rpx;
		margin: 0 auto;
		font-size: 30rpx;

		.other-main-center {
			width: 85%;
			margin: 0 1%;

			text {
				color: #1F9FFB;
			}

			span {
				color: #333;
			}
		}
	}

	.other-main-bottom {
		width: 690rpx;
		height: 80rpx;
		margin: 0 auto;
		font-size: 30rpx;
		justify-content: space-around;

		.main-bottom-left {
			color: #999;
		}

		.main-bottom-center {
			width: 80%;
			color: #333;
			margin-left: 3%;
		}

		.main-bottom-right {
			text-align: right;
		}
	}
</style>
